<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 3分钟倒计时动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        button{
            display: block;
            width: 200px;
            height: 60px;
            margin: 50px auto;
            font-size: 24px;
            font-weight: 700;
        }
        .wrap {
            width: 450px;
            height: 100px;
            margin: 50px auto;
            background-color: #c7c7c7;
            border: 5px solid #cc0000;
            /*animation: mover 10s steps(10);*/
        }
        #countdown{
            text-align: center;
            line-height: 58px;
            font-size: 40px;
            padding-top: 20px;
        }
        .num{
            display: inline-block;
            width: 28px;
            height: 56px;
            background: url("1505460471_414332.png");
            background-repeat: no-repeat;
        }
        .dot{
            position: relative;
            bottom: 16px;
        }
        @keyframes minus-second01 {
            0% {  background-position: -560px 0;  }
            100% {  background-position: -4px 0;  }
        }
        @keyframes minus-second10 {
            0% {  background-position: -336px 0;  }
            100% {  background-position: -4px 0;  }
        }
        @keyframes minus-minute {
            0% {  background-position: -168px 0;  }
            100% {  background-position: -4px 0;  }
        }
        .minus-active .second01{
            animation: minus-second01 10s steps(10,start) 18;
        }
        .minus-active .second10{
            animation: minus-second10 60s steps(6,start) 3;
        }
        .minus-active .minute{
            animation: minus-minute 180s steps(3,start) ;
        }
    </style>
    <script>
        window.onload = function () {
            var btn = document.getElementsByTagName("button")[0];
            var countdown = document.getElementById("countdown");
            btn.onclick = function(){
                countdown.className = "minus-active";
            }
        }
    </script>
</head>
<body>
    <div class="wrap">
        <div id="countdown">
            <span class="num"></span><span class="num minute"></span>
            <span class="dot">:</span>
            <span class="num second10"></span><span class="num second01"></span>
        </div>
    </div>
    <button>点击开始计时</button>
</body>
</html>